<template>
	<div class="workflow_step_content">
		<div class="steps-contents">
			<div v-for="(item, index) in humanWorkflowSteps" id="workflow_steps" :key="index">
				<div id="workflow_step" class="workflow_step">
					<div class="step_ing" v-show="item.status"></div>
					<div class="step_un" v-show="!item.status"></div>
					<div class="step-conent">
						<Tooltip placement="top" class="tips" max-width="200px" :transfer="true" :class="{ step_title: item.content, step_title_bold: !item.status }">
							<div slot="content">
								<p class="tips-conent">{{ item.content }}</p>
							</div>
							<p class="conent">{{ item.content }}</p>
						</Tooltip>
					</div>

					<div class="step_line" v-show="index !== humanWorkflowSteps.length - 1"></div>
					<RadioGroup v-model="item.status" class="step-finish" @on-change="change(item)">
						<Radio v-if="index === 0" :label="$t('session.completed')"></Radio>
						<Radio v-else :disabled="humanWorkflowSteps[index - 1].status ? false : true" :label="$t('session.completed')"></Radio>
					</RadioGroup>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import ivcs from '../ivcs-sdk';
import { saveWorkFlowStep, finishedWorkFlow } from '../api/api';
export default {
	name: 'WorkflowStep',
	props: {
		sessionId: {
			type: String,
			default: () => ''
		},
		bizScenarioId: {
			type: Number,
			default: () => 0,
			required: true
		}
	},
	data() {
		return {
			humanWorkflowSteps: this.$store.state.humanWorkflowSteps,
			workflowId: this.$store.state.workflowId
		};
	},
	mounted() {
		console.log(this.$store.state.humanWorkflowSteps);
	},
	watch: {
		'$store.state.humanWorkflowSteps': function(newValue, oldValue) {
			console.log('store.state.humanWorkflowSteps oldValue', oldValue);
			// 需要执行的代码
			this.humanWorkflowSteps = newValue;
			console.log('newValue', this.humanWorkflowSteps);
		},
		'$store.state.workflowId': function(newValue, oldValue) {
			console.log('store.state.workflowId oldValue', oldValue);
			this.workflowId = newValue;
		},
		'$store.state.customerData': function(newValue, oldValue) {
			console.log('store.state.customerData oldValue', oldValue);
			this.customerData = newValue;
		}
	},
	methods: {
		/**
		 * @param {String} businessType 数据类型
		 * @param {String} message 消息
		 * @param {Object} result 结果
		 * @param {Object} info 额外信息
		 * @param {String} role 角色
		 */
		sendMessageRecord(businessType, message, result, info, role) {
			let data = {};
			data.businessType = businessType ? businessType : '';
			data.message = message ? message : '';
			data.result = result ? result : { code: '', message: '' };
			data.info = info ? info : {};
			role = role ? role : 'all';
			ivcs.agent.sendCustomMessage(
				data,
				role,
				success => {
					console.log('发送消息成功！' + data, success);
				},
				error => {
					console.log('发送消息失败！' + data, error);
				}
			);
		},

		//标记已完成人工工作流
		finishedWorkFlow(stepId, sessionId) {
			return new Promise((resolve, reject) => {
				let data = {};
				data.stepId = stepId;
				data.sessionId = sessionId;
				finishedWorkFlow(data)
					.then(res => {
						console.log(res);
						resolve();
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		},

		//保存已完成的人工工作流
		saveWorkFlowStep(sessionId, humanStepId, content, bizScenarioId) {
			return new Promise((resolve, reject) => {
				let para = {};
				para.sessionId = sessionId;
				para.humanStepId = humanStepId;
				para.content = content;
				para.bizScenarioId = bizScenarioId;
				saveWorkFlowStep(para)
					.then(res => {
						console.log(res);
						resolve();
					})
					.catch(e => {
						console.log(e);
						reject(e);
					});
			});
		},

		clearWorkStepValue() {
			this.humanWorkflowSteps = [];
		},

		//点击完成按钮发自定义消息给后管
		change(item) {
			console.log(item);
			Promise.all([this.finishedWorkFlow(item.id, this.sessionId), this.saveWorkFlowStep(this.sessionId, item.id, item.content, this.bizScenarioId)])
				.then(res => {
					console.log('promise all result', res);
					this.$Notice.success({
						title: this.$t('ivcs.confirm'),
						desc: this.$t('ivcs.workFlowStepSuccess'),
						duration: 5,
						top: 0
					});
				})
				.catch(err => {
					this.$Notice.error({
						title: this.$t('ivcs.confirm'),
						desc: this.$t('ivcs.workFlowStepFailed') + err.message || err,
						duration: 5,
						top: 0
					});
				});
			this.$store.commit('setWorkFlow', this.humanWorkflowSteps);
			let workflowName = this.$store.state.workflowName;
			this.sendMessageRecord('workflow', workflowName, { ...item, bizScenarioId: this.bizScenarioId }, this.humanWorkflowSteps, 'agents');
		}
	}
};
</script>

<style>
.workflow_step_content .ivu-tooltip-popper .ivu-tooltip-dark {
	white-space: pre-wrap;
	font-size: 12px;
}
.workflow_step_content .ivu-tooltip-rel {
	width: 100%;
}
.ivu-tooltip-inner {
	background-color: #f6f6f6 !important;
	border: 1px solid #e8e8e8 !important;
	box-shadow: #000, 3px 1px 0.6 !important;
	color: #333 !important;
}
.ivu-tooltip-arrow {
	border-top-color: #f6f6f6 !important;
	display: none;
}
</style>
<style scoped>
.step_ing {
	min-width: 12px;
	min-height: 12px;
	background: #ffffff;
	border: 3px solid #2c89ea;
	border-radius: 50%;
	margin-left: 15px;
}

.step_un {
	min-width: 12px;
	min-height: 12px;
	background: #bebebe;
	border-radius: 50%;
	margin-left: 15px;
}

.workflow_step {
	display: flex;
	align-items: center;
	position: relative;
}

.step_line {
	width: 2px;
	height: 25px;
	background: #ececec;
	position: absolute;
	left: 20px;
	top: 30px;
}

.step_title {
	height: 40px;
	font-size: 12px;
	font-family: PingFang SC, sans-serif;
	font-weight: bold;
	color: #999999;
	line-height: 40px;
	margin-left: 10px;
}
.tips {
	width: 100%;
}

.step_title_bold {
	height: 40px;
	font-size: 12px;
	font-family: PingFang SC, sans-serif;
	font-weight: bold;
	color: #333333;
	line-height: 40px;
	margin-left: 10px;
}

.step-finish {
	justify-self: flex-end;
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.workflow_step_content {
	overflow: auto;
	height: 140px;
}
.conent {
	cursor: default;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: initial;
	overflow: hidden;
	word-break: break-all;
	width: 90%;
}
.tips-conent {
	font-size: 12px;
}
.steps-contents {
	height: 140px;
	overflow-y: auto;
	overflow-x: hidden;
}
.step-conent {
	width: 76%;
}
</style>

<style>
.workflow_step_content .ivu-radio-checked .ivu-radio-inner::after {
	position: absolute;
	content: '';
	display: table;
	width: 5px;
	height: 9px;
	top: 1px;
	left: 4px;
	border: 2px solid #2d8cf0;
	border-top: 0;
	border-left: 0;
	transform: rotate(45deg) scale(1);
	transition: all 0.2s ease-in-out;
	background-color: white;
}
</style>
